<template>
  <div class="infinite-container greenTop">
    <div class="select-role flex flex_between">
      <div class="roleLeft flex flex_vcenter">
        <img src="../../assets/images/icon_mzfy_user.png" alt="">
        <span class="ml10">{{familyPerson.realname}}</span>
      </div>
      <div class="roleRight flex flex_vcenter">
        <span>{{detail.costDate}}</span>
      </div>
    </div>
    <white-block :head="true">
      <div class="flex flex_between" slot="header">
        <span>合计费用</span>
        <span class="totalFee">{{detail.costAmount | fixedMoney}}</span>
      </div>
      <mu-list slot="content">
        <template v-for="(value, index) in detail.costDetails">
          <mu-list-item :title="value.itemName + ' ￥' + value.itmeAmount" toggleNested :open="true" :key="index">
            <div slot="nested"  :key="index1" v-for="(value1, index1) in detail.costDetails[index].itmeDetails">
              <mu-flexbox slot="right" class="tcenter pd10">
                <mu-flexbox-item>{{value1.detailName}}</mu-flexbox-item>
                <mu-flexbox-item>{{value1.detailQuantity}}{{value1.detailUnit}}</mu-flexbox-item>
                <mu-flexbox-item>{{value1.detailAmount | fixedMoney}}</mu-flexbox-item>
              </mu-flexbox>
              <mu-divider/>
            </div>
          </mu-list-item>
        </template>
      </mu-list>
    </white-block>
    <p class="bottomTip f12 text-center">此费用数据仅供参考，以医院实际费用为准。</p>
  </div>
</template>

<script>
  import whiteBlock from '../../components/whiteBlock'
  export default {
    data () {
      return {
        detail: {},
        familyPerson: JSON.parse(sessionStorage.getItem('familyPerson')) || {}
      }
    },
    components: {
      whiteBlock
    },
    mounted () {
      this.detail = this.$route.query
    },
    methods: {

    }
  }
</script>

<style scoped lang="less">
  @import "../../common/css/flex.css";
  @import "../../common/css/vars";
  .select-role {
    padding:20px;
    span {
      color:white;
      font-size:16px;
    }
    .roleRight{
      img{
        margin-left:10px;
      }
    }
  }
  .totalFee{
    color:@color-primary
  }
</style>
